Experiment to rebuild Diffuse using web applets.
1---
2import { getCollection } from "astro:content";
3import AppletLayout from "../layouts/applet.astro";
4
5// Generate static paths
6export async function getStaticPaths() {
7 async function gen(path: string[]): Promise<{
8 applet: string;
9 title: string;
10 Component: (_props: Record<string, any>) => any;
11 }> {
12 let Applet;
13 let manifest;
14
15 if (path.length === 2) {
16 Applet = await import(`../applets/${path[0]}/${path[1]}/applet.astro`);
17 manifest = await import(`../applets/${path[0]}/${path[1]}/manifest.json`);
18 }
19
20 if (path.length === 4) {
21 Applet = await import(`../applets/${path[0]}/${path[1]}/${path[2]}/${path[3]}/applet.astro`);
22 manifest = await import(
23 `../applets/${path[0]}/${path[1]}/${path[2]}/${path[3]}/manifest.json`
24 );
25 }
26
27 if (Applet === undefined || manifest === undefined) {
28 throw new Error("Unsupported path length");
29 }
30
31 return {
32 applet: path.join("/"),
33 title: manifest.default.name,
34 Component: Applet.default,
35 };
36 }
37
38 const applets = await getCollection("applets");
39 const pages = await Promise.all(
40 applets.map((applet) => {
41 return gen(applet.id.split("/").slice(0, -1));
42 }),
43 );
44
45 return pages.map(({ applet, Component, title }) => {
46 return {
47 params: { applet },
48 props: { Component, title },
49 };
50 });
51}
52
53// Render props
54const { Component, title } = Astro.props;
55---
56
57<AppletLayout title={title}>
58 <Component />
59</AppletLayout>